<template>
	<view class="tabbar-box">
		<!-- <web-view src="../../pages/webview/tabbar.vue"></web-view> -->
		<view class="tabbar">
			<view
				class="tabbar-item"
				@click="changeIndex"
			>
				<i class="certishare-icon">
					<!-- <span>&#xe608;</span> -->
					<span class="certishare-icon-shouye"></span>
				</i>
				<view class="title">
					<span>首页</span>
				</view>
			</view>
			<view
				class="tabbar-item addCard"
				id="postBtn"
				@click="releaseCard"
			>
				<i class="certishare-icon">
					<span>&#xe835;</span>
				</i>
			</view>

			<view
				class="tabbar-item"
				@click="changeHome"
			>
				<!-- <u-icon name="backspace" custom-prefix="custom-icon" size="30" color="#888888"></u-icon> -->
				<i class="certishare-icon">
					<span>&#xe60c;</span>
				</i>
				<view class="title">
					<span>用户</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	name: 'TabBar',
	data() {
		return {
			isActive: true
		};
	},
	methods: {
		...mapState({
			loginStatus: (state) => state.user.loginStatus
		}),
		changeIndex() {
			if (!this.isActive) {
				this.isActive = !this.isActive;
			}
		},

		changeHome() {
			uni.navigateTo({
				url: '/pages/my/my'
			});
		},
		releaseCard() {
			if (!this.loginStatus()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				uni.navigateTo({
					url: '/pages/release/release'
				});
			}
		},
		addRotateAnimation() {
			console.log('进来了');
			const dom = uni.createSelectorQuery().in(this);
			console.log(dom);
			dom.select('#postBtn').boundingClientRect((data) => {
				console.log(data);
			});
		}
	},
	mounted() {
		// this.isActive = true;
		this.addRotateAnimation();
	}
};
</script>

<style lang="scss">
@import url('../../static/iconfont/iconfont.css');
.tabbar-box {
	width: 500rpx;
	height: 90rpx;
	background-color: #fff;
	border-radius: 40px;
	display: flex;
	position: relative;
	justify-content: center;
	box-shadow: 0px 10px 15px -3px rgba(61, 118, 211,0.7);
	.tabbar {
		width: 90%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 2;
		.tabbar-item {
			font-size: 14px;
			width: 100rpx;
			height: 100%;
			align-items: center;
			display: flex;
			flex-direction: column;
			position: relative;

			i {
				font-size: 32px;
				font-weight: 700;
			}
			.title {
				transition: 0.3s;
				position: absolute;
				top: 40%;
				margin-top: 10px;
				span {
					font-size: 12px;
					font-weight: 700;
					color: rgb(61, 118, 211);
				}
			}
		}
		.addCard {
			width: 80px;
			height: 80px;
			background-color: #fff;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			box-shadow: 0px 0px 14px 0px rgba(110, 163, 219, 1);
			i {
				width: 50px;
				height: 50px;
				background-color: rgb(110, 163, 219);
				box-shadow: 0px 0px 14px 0px rgba(110, 163, 219, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				color: #fff;
				font-weight: 700;
				span {
					font-size: 30px;
					color: #fff;
				}
			}
		}
		.rotate {
			animation: loop 1.5s linear forwards;
		}
	}
}
@keyframes loop {
	0% {
		transform: rotateZ(0deg);
	}
	30% {
		transform: rotateZ(-45deg);
	}
	60% {
		transform: rotateZ(45deg);
	}
	100% {
		transform: rotateZ(0deg);
	}
}
</style>
